<template>
  <div class='tinymce'>
    <h1>
      <el-row>
        <el-col :span="5">
          <span>添加文章</span>
          <el-button class="addBtn" @click="goBack">返回</el-button>
        </el-col>
        <el-col :span="19" style="text-align:right">
           <el-button v-if="article" type="primary" @click="submitArticle('formAling')">修改文章</el-button>
           <el-button v-else type="primary" @click="submitArticle('formAling')">保存</el-button>
        </el-col>
      </el-row>
    </h1>
    <h3>
      <el-form :inline="true"  :rules="form1" ref="form1" :model="form1">
        <el-form-item label="分类">
          <el-select  v-model="form1.value" placeholder="请选择" style="width:120px">
          <el-option
            v-for="item in form1.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form1.line" placeholder="请选择状态" style="width:120px">
            <el-option label="上线" value="0"></el-option>
            <el-option label="下线" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布者ID">
          <el-select v-model="form1.hlpe" placeholder="情选择ID" style="width:120px">
            <el-option label="牙套小助手" value="0"></el-option>
            <el-option label="口腔小助手" value="1"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item  prop="type">
          <el-checkbox-group v-model="form1.type">
            <el-checkbox label="首页推荐文章" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
     <el-form  label-width="80px" :rules="aling" ref="formAling" :model="formLabelAlign">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12">
        
        <el-form :inline="true"  :rules="form2" ref="form2" :model="form2">
          <el-form-item label="活动形式" prop="desc">
            <el-input style="width:300px;height:146px" type="textarea" v-model="form2.desc"></el-input>
          </el-form-item>
         </el-form>
        </el-col>
        <el-col :span="12">
          <span style="font-weight:normal;font-size:14px">封面图：</span>
          <el-upload
            style="display:inline-block"
            :action="action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleOK"
            :data="postData"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-col>

      </el-row>
    </h3>
    <div class="initbox">
      <el-button class="initBtn" @click="upImageFun">图</el-button>
      <editor id='tinymce' v-model='tinymceHtml' :init='init'> </editor>
      
    </div>
    <div v-html='tinymceHtml'></div>
    <el-dialog :visible.sync="imgstuts">
      <el-upload
        class="upload-demo"
       :action="action"
        :on-preview="handlePreview"
        :on-remove="handleRemoveEidt"
        :before-remove="beforeRemove"
        :data="postData"
        multiple
       
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import {mapActions,mapMutations,mapGetters,mapState} from 'vuex'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import qnUrl from '@/Http/qiniuUrl'


export default {
  name: 'tinymce',
  data () {
    const title = (rule,value,callback) => {
      if (value === '') {
        callback(new Error('请输入标题'))
      } else {
        callback()
      }
    }
    return {
      action:qnUrl,//七牛的上传地址
      tinymceHtml: '请输入内容',
      imgUrl:'',
      imgstuts:false,
      fileList:[],
      postData:{
        token:'7A2VCYePXW2amPwRDIrmGogf8tUZaoWrXzuz_EaI:EX22qnBr3cXhfKVZMeUgRFXKIsc=:eyJzY29wZSI6ImFpbGlseS1vZmZpY2UiLCJkZWFkbGluZSI6MTUzNDU2NzI4Mn0=',
      },
      form2:{
        desc:'',
      },
       dialogImageUrl: '',
        dialogVisible: false,
      form1:{
        hlpe:22,
        hlpes:[
          {value:10001,label:'牙套小助手'},
          {value:10002,label:'口腔小助手'}
        ],
        line:'上线',
        value:'全部',
        
        type:'',
        options:[{
          value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'口腔健康'
        },{
          value:3,
          label:'儿童口腔'
        },{
          value:4,
          label:'种植牙'
        }],
      },
      formLabelAlign:{
        title:'',
        
      },
      aling:{
        title:[
          {validator:title,trigger:'blur'}
        ]
      },
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  created() {
    if(this.article) {
      this.tinymceHtml = this.article.ohtml
    } else {
      this.tinymceHtml = '请输入内容'
 
    }
  },
  computed: {
    ...mapState(['article'])  
  },
  mounted () {
    tinymce.init({})
    
  },
  methods:{
    handleRemoveEidt(file, fileList) {
        
      },
      handlePreview(file) {
      },
      
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    handleRemove(file, fileList) {
        
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleOK(responed) {
        this.imgUrl = `http://odqiuyfsp.bkt.clouddn.com/${responed.key}`;
      },
    submitArticle(val) {
      this.$refs[val].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.tinymceHtml === '请输入内容'){
          this.$message.error('请输入文章内容')
          return
        }
      })
    },
    goBack(){
      this.$router.go(-1)
    },
    upImageFun(){
      this.imgstuts = true
    }
  },
  components: {
    Editor,
  }
}
</script>
<style>
.el-textarea__inner{
  height:146px
}
.initbox{
  position: relative;
}
.initBtn{
  position: absolute;
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 786px;
  width: 30px;
  padding: 0;
  height: 33px;
  border: 1px solid red;
}
</style>
